<template>
  <div class="card-out-container">
    <a-row class="mb-20">
      <a-col :span="12">
        <a-radio-group v-model:value="queryParam.resolved" @change="loadData(1)">
          <a-radio-button :value="null">{{$t('common.all')}}</a-radio-button>
          <a-radio-button :value="0">{{$t('sysManage.pending')}}</a-radio-button>
        </a-radio-group>
      </a-col>
      <a-col :span="12" class="text-right">
        <a-button ghost type="primary" @click="destoryAllNotice">{{$t('sysManage.allComplete')}}</a-button>
      </a-col>
    </a-row>
    <a-table rowKey="id" size="small" :loading="loading" :dataSource="dataSource" :columns="columns" :pagination="ipagination" :scroll="{y: 'calc(100vh - 340px)'}" @change="handleTableChange">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'content'">
          <span v-if="record.notifyType==1 || record.notifyType==2 " class="text-tip">
            <exclamation-circle-outlined />
          </span>
          <span v-else class="text-red">
            <close-circle-outlined />
          </span>
          {{record.content}}
        </template>
        <template v-if="column.key === 'resolved'">
          <a-tag :color="record.resolved == 0? 'warning':record.resolved == 1?'success': 'default'">
            {{record.resolved == 0? $t('sysManage.pending') :record.resolved == 1? $t('sysManage.completed'): '已取消'}}
          </a-tag>
        </template>
        <template v-else-if="column.key === 'operate'">
          <span class="table-operate-container">
            <a-button v-if="!record.resolved" type="link" class="primary-link" @click="closeNotice(record)">{{$t('layout.complete')}}</a-button>
          </span>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script>
import { ListMixinPm } from '@/mixin/listMixinPm.js'
import { formatTime } from '@/utils'
import { notification } from 'ant-design-vue'
import { store } from '@/store'
import { mapState } from 'vuex'
import axios from '@/utils/request'
import { CloseCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
export default {
  name: 'notifyMsg',
  mixins: [ListMixinPm],
  components: {
    CloseCircleOutlined,
    ExclamationCircleOutlined
  },
  computed: {
    ...mapState({
      isCollapse: state => state.setting.isCollapse,
      operateNoticeList: state => state.operateData.operateNoticeList,
    })
  },
  data () {
    return {
      queryParam: {
        resolved: null
      },
      url: {
        list: '/api/hanger/hanger-notify/list',
        save: '/api/hanger/hanger-notify/save',
        allDone: '/api/hanger/hanger-notify/resolved-all'
      },
      columns: [
        { title: this.$t('layout.noticeContent'), dataIndex: 'content', key: 'content', align: 'left', width: 300 },
        { title: this.$t('common.state'), dataIndex: 'resolved', key: 'resolved', align: 'center', width: 130 },
        {
          title: this.$t('other.sendTime'), dataIndex: 'createTime', key: 'createTime', align: 'center', width: 170,
          customRender: ({ text }) => {
            return formatTime(text, 'YYYY-MM-DD HH:mm:ss')
          }
        },
        { title: this.$t('common.operate'), dataIndex: 'operate', key: 'operate', align: 'center', width: 80, fixed: 'right' },
      ],
      showMore: true,
      storeName: 'getUntreatNotice',
      needLoad: false
    }
  },
  methods: {
    async closeNotice (record) {
      let { id } = record
      await axios.postAction(this.url.save, { id, resolved: 1 })
      let ary = [...this.operateNoticeList]
      notification.close(id)
      ary = ary.filter(i => i.id != id)
      store.commit('updateOperateState', {
        operateNoticeList: ary
      })
      this.loadData()
    },
    async destoryAllNotice () {
      await axios.postAction(this.url.allDone)
      notification.destroy()
      store.commit('updateOperateState', {
        operateNoticeList: []
      })
      this.loadData()
    },
  },
  watch: {
    $route () {
      if (this.$route.path == '/personalCenter/noticeMsg' && this.$route.query.unDo) {
        this.queryParam.resolved = 0
        this.loadData(1)
      }
    }
  },
  created () {
    if (this.$route.query.unDo) {
      this.queryParam.resolved = 0
      this.loadData()
    } else {
      this.loadData()
    }
  }
}
</script>